<template>
	<div class="BoxDetail mask">
		<div class="dialog">
			<div class="header">
				<div class="title">{{ props.box.name }}的物品</div>
				<div class="close" @click="onDialogClose">
					<img class="icon" src="@/static/img/battle/ChooseBox/close.png" />
				</div>
			</div>
			<div class="body">
				<OverlayScrollbarsComponent style="height: 390px">
					<div class="goods">
						<div class="goods-item" v-for="(item, index) in goods" :key="index">
							<div class="info">
								<div class="price">
									<img class="price-icon" src="@/static/img/battle/createBattle/icon_coin.png" />
									<span class="price-value">{{ item.price }}</span>
								</div>
								<div class="race">{{ item.race }}</div>
							</div>
							<img class="img" :src="processImageUrl(item.img)" />

							<span class="title">{{ item.name }}</span>
							<span class="tag" :style="{ color: item.color }">{{ item.tag }}</span>
							<span class="desc">{{ item.desc }}</span>
						</div>
					</div>
				</OverlayScrollbarsComponent>
			</div>
			<div class="footer">
				<div class="total">
					<img class="icon" src="@/static/img/battle/createBattle/icon_coin.png" />
					<span class="value"> {{ staticsPrice() }}</span>
				</div>
				<div>
					<div class="btnSubmit" @click="btnSubmit">添加箱子</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue';
import { processImageUrl } from '@/utils';

import 'overlayscrollbars/overlayscrollbars.css';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';

export default defineComponent({
	setup(props, { emit }) {
		// 创建一个响应式状态对象
		const state = reactive({
			loading: false,
			goods: [
				{
					id: 1,
					name: 'M14A-消音型',
					img: '',
					tag: '女火神之炽焰',
					color: 'rgba(109, 206, 255, 1)',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 2,
					name: 'Tec-9',
					img: '',
					tag: '地下水',
					color: 'rgba(163, 121, 255, 1)',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 3,
					name: 'Tec-9',
					img: '',
					tag: '地下水',
					color: 'rgba(240, 93, 93, 1);',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 4,
					name: 'M14A-消音型',
					img: '',
					tag: '女火神之炽焰',
					color: 'rgba(109, 206, 255, 1)',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 5,
					name: 'Tec-9',
					img: '',
					tag: '地下水',
					color: 'rgba(163, 121, 255, 1)',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 6,
					name: 'Tec-9',
					img: '',
					tag: '地下水',
					color: 'rgba(240, 93, 93, 1);',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 7,
					name: 'M14A-消音型',
					img: '',
					tag: '女火神之炽焰',
					color: 'rgba(109, 206, 255, 1)',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 8,
					name: 'Tec-9',
					img: '',
					tag: '地下水',
					color: 'rgba(163, 121, 255, 1)',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				},
				{
					id: 9,
					name: 'Tec-9',
					img: '',
					tag: '地下水',
					color: 'rgba(240, 93, 93, 1);',
					desc: '略有磨损',
					price: 59.45,
					race: '25.00%'
				}
			]
		});

		onMounted(() => {});

		function changeBoxItemCount(box: any, type: number) {
			if (box.count + type < 0) {
				return;
			}
			box.count += type;
		}

		function staticsPrice() {
			return state.goods
				.map((item) => {
					return item.price;
				})
				.reduce((a, b) => {
					return a + b;
				})
				.toFixed(2);
		}

		function onDialogClose() {
			emit('close', false);
		}

		function btnSubmit() {
			emit('close', false);
		}

		return {
			...toRefs(state),
			processImageUrl,
			changeBoxItemCount,
			staticsPrice,
			props,
			onDialogClose,
			btnSubmit
		};
	},
	components: {
		OverlayScrollbarsComponent
	},

	props: {
		box: {
			type: Object,
			default: () => null
		}
	}
});
</script>

<style scope lang="scss">
@import '@/views/battle/components/CreateBattle/BoxDetail.scss';
</style>
